<template>
    <div class="app-container">
        <!-- 主体 start -->
        <el-container>
            <el-main height>
                <el-button type="primary" @click="showPupop">添加</el-button>
                <!-- 表格 start -->
                <el-table
                    border
                    :data="list.List"
                    v-loading="loading"
                    style="width: 100%;margin-top:30px"
                >
                    <el-table-column align="center" prop="Title" label="标题"></el-table-column>
                    <el-table-column align="center" prop="Content" label="内容"></el-table-column>
                    <el-table-column align="center" prop="Lang" label="语言"></el-table-column>
                    <el-table-column align="center" prop="Type" label="类型">
                        <template slot-scope="scope">
                            <div v-if="scope.row.Type==1" style="color:#409EFF">●充值到账</div>
                            <div v-if="scope.row.Type==2" style="color:#409EFF">●通知</div>
                            <div v-if="scope.row.Type==3" style="color:#409EFF">●转入到账</div>
                            <div v-if="scope.row.Type==4" style="color:#409EFF">●转出到账</div>
                            <div v-if="scope.row.Type==5" style="color:#409EFF">●提币审核成功</div>
                            <div v-if="scope.row.Type==6" style="color:#409EFF">●提币审核失败</div>
                            <div v-if="scope.row.Type==7" style="color:#409EFF">●资讯</div>
                            <div v-if="scope.row.Type==8" style="color:#409EFF">●公告</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="Remarks" label="备注"></el-table-column>
                    <el-table-column align="center" prop="CreateTime" label="创建时间"></el-table-column>
                    <el-table-column align="center" label="操作" width="200px">
                        <template slot-scope="scope">
                            <el-button type="danger" size="mini" @click="deleteRow(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-top:20px">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="search.CurrentPage"
                        :page-sizes="[10, 20, 30, 40,50]"
                        :page-size="search.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="list.TotalCount"
                    ></el-pagination>
                </div>
                <!-- 表格 end -->
            </el-main>
        </el-container>
        <!-- 主体 end -->
        <!-- 查看弹窗 start -->
        <el-dialog
            title="资讯"
            :visible.sync="pupopState"
            :close-on-click-modal="false"
            class="edit-form"
        >
            <el-form label-width="100px">
                <el-form-item label="标题">
                    <el-input
                        v-model="row.Title"
                        placeholder="请输入单行文本标题"
                        clearable
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input
                        v-model="row.Content"
                        type="textarea"
                        placeholder="请输入单行文本内容"
                        :autosize="{minRows: 4, maxRows: 4}"
                        :style="{width: '100%'}"
                    ></el-input>
                </el-form-item>
                <el-form-item label="语言">
                    <el-select
                        v-model="row.Lang "
                        placeholder="请输入单行文本语言"
                        clearable
                        :style="{width: '100%'}"
                    >
                        <el-option
                            v-for="(item, index) in LangOptions"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="类型">
                    <el-radio-group v-model="row.Type" size="medium">
                        <el-radio
                            v-for="(item, index) in TypeOptions"
                            :key="index"
                            :label="item.value"
                            :disabled="item.disabled"
                        >{{item.label}}</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="pupopState = false">关 闭</el-button>
                <el-button type="primary" @click="config">确 认</el-button>
            </span>
        </el-dialog>
        <!-- 查看弹窗 end -->
    </div>
</template>

<script>
import { GetAdminInfoList, DeleteInfo, AddInfo } from "../../api/fund";
import { GetLangType } from "../../api/public";
export default {
    data() {
        return {
            //表格参数
            loading: true,
            list: [],
            search: {
                CurrentPage: 1,
                PageSize: 10,
                Rules: "",
            },
            //弹窗参数
            pupopState: false,
            row: {
                Title: "",
                Content: "",
                Lang: "zh-cn",
                Type: 7,
            },
            lang: [],
            LangOptions: [
                {
                    label: "zh-cn",
                    value: "zh-cn",
                },
                {
                    label: "en",
                    value: "en",
                },
            ],
            TypeOptions: [
                {
                    label: "资讯",
                    value: 7,
                },
                {
                    label: "公告",
                    value: 8,
                },
            ],
        };
    },
    watch: {},
    created() {
        this.getList();
    },
    methods: {
        //获取用户数据
        getList() {
            this.loading = true;
            GetAdminInfoList(this.search).then((res) => {
                if (res.Code == 200) {
                    this.list = res.Data;
                    this.loading = false;
                }
            });
        },
        //添加
        config() {
            this.$confirm("是否添加该资讯", "温馨提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    AddInfo(this.row).then((res) => {
                        if (res.Code == 200) {
                            this.$message({
                                message: "添加成功",
                                type: "success",
                            });
                            this.pupopState = false;
                            this.getList();
                        }
                    });
                })
                .catch(() => {});
        },
        //删除
        deleteRow(row) {
            this.$confirm("是否删除该资讯", "温馨提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    const data = {
                        id: row.Id,
                    };
                    DeleteInfo(data).then((res) => {
                        if (res.Code == 200) {
                            this.$message({
                                message: "删除成功",
                                type: "success",
                            });
                        }
                    });
                })
                .catch(() => {});
        },
        //弹窗
        showPupop(row) {
            //this.row = row;
            this.pupopState = true;
        },
        handleSizeChange(val) {
            this.search.PageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            this.search.CurrentPage = val;
            this.getList();
        },
    },
};
</script>
<style>
.box {
    border: 1px solid #ccc;
    padding: 10px 0;
    margin-top: 20px;
}
.title {
    font-weight: bold;
    margin-left: 20px;
    font-size: 20px;
    padding: 20px 0;
}
</style>
